<template>
  <!--pages/phone-login/phone-login.wxml-->
  <view class="phone-login-container">
    <text class="phone-validate">手机号验证</text>
    <text class="subtitle">用于即使获取课程最新信息</text>
    <view class="content">
      <input class="phone" v-model="phone" placeholder="请输入您的手机号" type="number" />
      <view
        class="get_vcode"
        @click="getVcode"
        :style="{color:iscodeDown ? '#cccccc' : '#000000'}"
      >{{tipName}}</view>
      <input class="vcode" v-model="vcode" placeholder="请输入验证码" type="number" />
    </view>
    <view class="phone-login" @click="phoneLogin">
      <image src="/static/images/phone_login@2x.png" alt />
    </view>
  </view>
</template>
<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      iscodeDown: false,
      tipName: "获取验证码",
      codeDownTime: 10,
      timeID: null,
      phone: "",
      vcode: "",
    };
  },
  onUnload() {
    clearInterval(this.timeID);
  },
  methods: {
    // 点击获取验证码
    async getVcode() {
      // 验证手机号是否合法
      const reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!reg.test(this.phone)) {
        uni.showToast({
          title: "手机号不合法",
          icon: "none",
          duration: 1500,
        });
        return;
      }
      // 倒计时开始
      if (this.iscodeDown) return;
      this.tipName = this.codeDownTime;
      this.iscodeDown = true;
      this.timeID = setInterval(() => {
        this.codeDownTime--;
        if (this.codeDownTime >= 1) {
          this.tipName = this.codeDownTime;
        } else {
          clearInterval(this.timeID);
          this.tipName = "获取验证码";
          this.iscodeDown = false;
          this.codeDownTime = 10;
        }
      }, 1000);
      const res = await request({
        url: "user/vcode",
        data: { phone: this.phone },
      });
      //   console.log(res, 12);
      if (res.data.status === 0) {
        uni.showToast({
          title: `${res.data.vcode}`,
          duration: 2000,
          icon: "none",
        });
      }
    },
    // 手机号登录
    async phoneLogin() {
      const res = await request({
        url: "user/login",
        method: "POST",
        data: { phone: this.phone, vcode: this.vcode },
        tip: "登录中",
      });
      console.log(res);
      if (res.data.status === 0) {
        uni.showToast({
          title: res.data.message,
          icon: "none",
          duration: 2000,
          success: () => {
            uni.setStorageSync("token", res.data.token);
            uni.reLaunch({
              url: "/pages/home/index",
            });
          },
        });
      }
    },
  },
};
</script>
<style lang='less' scoped>
.phone-login-container {
  padding: 20rpx 68rpx;
}

.phone-login-container .phone-validate {
  margin-top: 150rpx;
  color: #393939;
  font-size: 40px;
}

.phone-login-container .subtitle {
  margin-top: 30rpx;
  color: #a8a8a8;
  font-size: 30rpx;
  display: inline-block;
}

.phone-login-container .content {
  margin-top: 150rpx;
  height: 250rpx;
  position: relative;
}

.phone-login-container .content .phone {
  height: 100rpx;
  font-size: 15px;
  position: relative;
}

.phone-login-container .content .get_vcode {
  position: absolute;
  right: 0;
  top: 20rpx;
  width: 164rpx;
  height: 56rpx;
  text-align: center;
  line-height: 56rpx;
  font-size: 24rpx;
  color: #a8a8a8;
  border: 1px solid rgba(168, 168, 168, 1);
  border-radius: 20px;
  z-index: 2;
}

.phone-login-container .content .vcode {
  margin-top: 30px;
  height: 100rpx;
  font-size: 15px;
  position: relative;
}

.phone-login-container .content .vcode::after {
  content: "";
  position: absolute;
  background-color: #e9e9e9;
  left: 0;
  right: 0;
  height: 1px;
  bottom: 1px;
}

.phone-login-container .content .phone::after {
  content: "";
  position: absolute;
  background-color: #e9e9e9;
  left: 0;
  right: 0;
  height: 1px;
  bottom: 1px;
}

.phone-login-container .phone-login {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-login-container .phone-login image {
  width: 568rpx;
  height: 98rpx;
}
</style>